<template>
  <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1">
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>子流水</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="800px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">新增子流水</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                      <v-select 
                      :items="cserseqnItems" 
                      label="主流水号" 
                      v-model="editedItem.serseqn"
                      item-text="serseqn"
                      item-value="serseqn"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-select 
                      :items="prdcodeItems" 
                      label="产品代码" 
                      v-model="editedItem.prdcode"
                       item-text="productName"
                      item-value="productCode"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-select 
                      :items="ccyItems" 
                      label="币种" 
                      v-model="editedItem.ccy"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.custid" label="客户号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.accno" label="账号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.accsub" label="产品账号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.debtno" label="借据编号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.acbnod" label="账簿项编号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                     <v-select 
                      :items="flgcrItems" 
                      label="钞汇标志" 
                      v-model="editedItem.flgcr"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">

                     <v-select 
                     :items="brcInfoItems" 
                     label="机构编号" 
                     v-model="editedItem.brcadsc"
                      item-text="brcname"
                      item-value="brc"
                     ></v-select>
                  </v-col>
                  
                  <v-col cols="12" sm="6" md="4">
                     <v-select 
                      :items="sceneItems" 
                      label="交易事件" 
                      v-model="editedItem.scene"
                      item-text="sceneName"
                      item-value="sceneCode"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.vouno" label="凭证号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-select 
                      :items="voutypItems" 
                      label="凭证种类" 
                      v-model="editedItem.voutyp"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  
                  <v-col cols="12" sm="6" md="4">
                     <v-select 
                      :items="isclsalItems" 
                      label="是否允许冲销" 
                      v-model="editedItem.isclsal"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.accnoa" label="对方账号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.accnama" label="对方户名"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.brcoter" label="对方行号"></v-text-field>
                  </v-col>
                       <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.brcbcdb" label="对方行名"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                     <v-select 
                      :items="ccyItems" 
                      label="对方币种" 
                      v-model="editedItem.ccyopp"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-select 
                      :items="flgcrItems" 
                      label="对方钞汇标识" 
                      v-model="editedItem.flgcrt"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                     <v-select 
                      :items="flgclrsItems" 
                      label="清算标志" 
                      v-model="editedItem.flgclrs"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                       <v-select 
                      :items="flgdealsItems" 
                      label="特殊处理标志" 
                      v-model="editedItem.flgdeals"
                      item-text="name"
                      item-value="attributes"
                     ></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.memono" label="摘要码"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.memo" label="摘要"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.teller" label="交易柜员"></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">取消</v-btn>
              <v-btn color="blue darken-1" text @click="save">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>


        <v-dialog v-model="productDialog" max-width="800px">
            <v-card>
              <v-card-title>
                编辑产品属性
              </v-card-title>
              <v-card-text>
                <v-row v-for="(item,index) in productAttributesItems" :key="item.productLabel">
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="productElements[index].bookValue" :label="item.productLabel"></v-text-field>
                  </v-col>
                </v-row> 
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                 <v-btn color="blue darken-1" text @click="closeProduct">取消</v-btn>
              <v-btn color="blue darken-1" text @click="saveProduct">保存</v-btn>
              </v-card-actions>
            </v-card>
        </v-dialog>

       <v-dialog v-model="amountDialog" max-width="800px">
            <v-card>
              <v-card-title>
                编辑金额属性
              </v-card-title>
              <v-card-text>
                <v-row >
                  <v-col cols="12" sm="6" md="4" v-for="(item,index) in amountItems" :key="item.id">
                    <v-text-field v-model="amountElements[index].bookValue" :label="item.name"></v-text-field>
                  </v-col>
                </v-row> 
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                 <v-btn color="blue darken-1" text @click="closeAmount">取消</v-btn>
              <v-btn color="blue darken-1" text @click="saveAmount">保存</v-btn>
              </v-card-actions>
            </v-card>
        </v-dialog>

      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
    </template>


     <template v-slot:item.actionProduct="{ item }">
       <v-btn small color="primary" @click="editProduct(item)">添加产品属性</v-btn>
    </template>


      <template v-slot:item.actionElement="{ item }">
      <v-btn small color="primary" @click="editAmount(item)">添加金额属性</v-btn>
    </template>

    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    brcInfoItems:[],
    cserseqnItems:[],
    prdcodeItems:[],
    ccyItems:[],
    flgcrItems:[],
    sceneItems:[],
    voutypItems:[],
    isclsalItems:[],
    flgclrsItems:[],
    flgdealsItems:[],
    
    productAttributesItems:[],
    amountItems:[],
    dialog: false,
    productDialog:false,
    amountDialog:false,
    productElements:[],
    amountElements:[],
    headers: [
      { text: "操作", value: "actionProduct", sortable: false,width:150 },
      { text: "操作", value: "actionElement", sortable: false ,width:150},
      {
        text: "主流水号",
        align: "start",
        value: "serseqn",width:150
      },
      { text: "产品代码", value: "prdcode",width:150 },
      { text: "币种", value: "ccy",width:150 },
      { text: "客户号", value: "custid",width:150 },
      { text: "账号", value: "accno" ,width:150},
      { text: "产品账号", value: "accsub" ,width:150},

      { text: "借据编号", value: "debtno" ,width:150},
      { text: "账簿项编号", value: "acbnod" ,width:150},
      { text: "钞汇标志", value: "flgcr" ,width:150},
      { text: "归属机构", value: "brcadsc",width:150 },
      { text: "交易事件", value: "scene",width:150 },

      { text: "凭证号", value: "vouno" ,width:150},
      { text: "凭证种类", value: "voutyp",width:150 },
      { text: "是否允许冲销", value: "isclsal" ,width:150},
      { text: "对方账号", value: "accnoa",width:150 },
      { text: "对方户名", value: "accnama" ,width:150},

      { text: "对方行号", value: "brcoter" ,width:150},
      { text: "对方行名", value: "brcbcdb",width:150 },
      { text: "对方币种", value: "ccyopp" ,width:150},
      { text: "对方钞汇标识", value: "flgcrt" ,width:150},
      { text: "清算标志", value: "flgclrs" ,width:150},

      { text: "特殊处理标志", value: "flgdeals",width:150 },
      { text: "摘要码", value: "memono",width:150 },
      { text: "摘要", value: "memo" ,width:150},
      { text: "交易柜员", value: "teller",width:150 },
      { text: "操作", value: "actions", sortable: false,width:150  }
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      serseqn: "",
      trancode: "",
      chnelno:"",
      module: "",
      brctran: "",
      flgtim: "",
    
    },
    defaultItem: {
       serseqn: "",
      trancode: "",
      chnelno:"",
      module: "",
      brctran: "",
      flgtim: "",
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增" : "修改";
    }
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  created() {
    this.initialize();
    this.getDict()
  },

  methods: {
    initialize() {
     this.axios
        .get("/actrnbook/list")
        .then(response => {
          this.desserts = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
    },
     getDict(){
        this.axios
        .get("/dict/topName/币种")
        .then(response => {
          this.ccyItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/钞汇标识")
        .then(response => {
          this.flgcrItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/凭证种类")
        .then(response => {
          this.voutypItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/是否允许冲销")
        .then(response => {
          this.isclsalItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/清算标志")
        .then(response => {
          this.flgclrsItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/dict/topName/特殊处理标志")
        .then(response => {
          this.flgdealsItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });

        this.axios
        .get("/actrninfo/list")
        .then(response => {
          this.cserseqnItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });

         this.axios
        .get("/prdrule/listDistinct")
        .then(response => {
          this.prdcodeItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
        this.axios
        .get("/scene/list")
        .then(response => {
          this.sceneItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
       this.axios
        .get("/brcInfo/list")
        .then(response => {
          this.brcInfoItems = response.data.data;
        })
        .catch(response => {
          console.log(response.data.message);
        });
      
        
    },



    editProduct(item){
        console.log(item);
        this.axios
         .get("/product/list/"+item.prdcode)
        .then(response => {
          this.productAttributesItems = response.data.data;
          this.productDialog = true
          this.productAttributesItems.forEach(element=>{
            var prdProject = {}
            prdProject.bookTag=element.productLabel
            prdProject.bookValue=''
            prdProject.bookId=item.id
            this.productElements.push(prdProject)
          })
          console.log(this.productElements)
        })
        .catch(response => {
          console.log(response.data.message);
        });
        
    },


    editAmount(item){
        this.axios
        .get("/dict/topName/金额解析要素")
        .then(response => {
          this.amountItems = response.data.data;
          console.log(this.amountItems)
          this.amountDialog = true
          this.amountItems.forEach(element=>{
            var amountProject = {}
            amountProject.bookTag=element.attributes
            amountProject.bookValue=''
            amountProject.bookId=item.id
            this.amountElements.push(amountProject)
          })
          
        })
        .catch(response => {
          console.log(response.data.message);
        });
        
    },
    



    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.desserts.indexOf(item);
      confirm("确定要删除此条记录吗?") &&
        this.axios.delete('/actrnbook/'+item.id)
          .then(res=>{
            this.desserts.splice(index, 1);
          })
        
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },
     closeProduct() {
      this.productDialog = false;
      
    },
    saveProduct(){
      console.log(this.productElements)
      let params = {
        params: this.productElements
      }
      this.axios.post('/bookAttributes/all',params)
      .then(response => {
         this.closeProduct()
        })
        .catch(response => {
          console.log(response)
        })
      
    },



      closeAmount() {
      this.amountDialog = false;
      
    },
    saveAmount(){
      console.log(this.amountElements)
      let params = {
        params: this.amountElements
      }
      this.axios.post('/bookAmount/all',params)
      .then(response => {
         this.closeAmount()
        })
        .catch(response => {
          console.log(response)
        })
      
    },

    save() {
       this.axios.post("/actrnbook", this.$qs.stringify(this.editedItem)).then(res => {
          this.initialize();
          this.close();
      });
      
    }
  }
};
</script>